<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        /* width: 600px;
        height: 600px; */
        width: 100%;
        height: 100%;
        /* border: 1px solid; */
        margin: 0 auto;
        position: relative;
      }
    </style>
  </head>

  <body>
    <div class="container"></div>
    <script>
      // 贪吃蛇
      // 生成静态的蛇身体；
      // 1.定义方块类；用来生成蛇身体的；
      class Rect {
        constructor(x, y, color) {
          this.ele = document.createElement("div");
          this.ele.style.width = "50px";
          this.ele.style.height = "50px";
          this.ele.style.position = "absolute";
          this.ele.style.border = "1px solid";
          this.ele.style.left = x + "px";
          this.ele.style.top = y + "px";
          this.ele.style.backgroundColor = color;
        }
        addDom(container) {
          container.appendChild(this.ele);
        }
      }

      // 食物类
      class Food {
        constructor() {
          this.food = new Rect(
            this.randomNum(0, 550),
            this.randomNum(0, 550),
            "green"
          );
        }
        randomNum(min, max) {
          return Math.round(Math.random() * (max - min)) + min;
        }
      }

      // let rect1 = new Rect(0,0,"blue");
      // let containerEle = document.querySelector(".container");
      // rect1.addDom(containerEle);

      // let rect2 = new Rect(50,0,"red");
      // rect2.addDom(containerEle);

      // 2.生成蛇类；
      class Snake {
        constructor() {
          this.body = [];
          this.dir = "right";
          this.createBody();
        }
        createBody() {
          for (let i = 0; i < 5; i++) {
            let rect;
            if (i == 4) {
              rect = new Rect(i * 50, 0, "red");
            } else {
              rect = new Rect(i * 50, 0, "blue");
            }
            this.body.push(rect);
          }
        }
        renderDom(container) {
          this.container = container;
          this.body.forEach((rect) => {
            rect.addDom(container);
          });
        }
        move() {
          // 1.让蛇头移动一个位置；
          let snakeHeadnumX = parseInt(
            this.body[this.body.length - 1].ele.style.left
          );
          // console.log(snakeHeadnumX);
          let snakeHeadnumY = parseInt(
            this.body[this.body.length - 1].ele.style.top
          );
          switch (this.dir) {
            case "right":
              this.body[this.body.length - 1].ele.style.left =
                snakeHeadnumX + 50 + "px";
              break;
            case "left":
              this.body[this.body.length - 1].ele.style.left =
                snakeHeadnumX - 50 + "px";
              break;
            case "up":
              this.body[this.body.length - 1].ele.style.top =
                snakeHeadnumY - 50 + "px";
              break;
            case "down":
              this.body[this.body.length - 1].ele.style.top =
                snakeHeadnumY + 50 + "px";
              break;
          }

          // 2.把最后一个方块干掉；
          // 删除body里的第一个 对象；
          // var res = this.body.shift();
          // // console.log(this.body);
          // res.ele.remove();

          // 3.要在头部的后面新生成一个rect 添加上去；
          let rect = new Rect(snakeHeadnumX, snakeHeadnumY, "blue");
          rect.addDom(this.container); //添加到视图
          this.body.splice(this.body.length - 1, 0, rect); // 添加到body里

          // 检测碰撞 ： 蛇头 和 食物 的碰撞；
          let head = this.body[this.body.length - 1];
          console.log(food);
          if (isCrash(head.ele, food.food.ele)) {
            // console.log("碰了");
            // 1.食物消失 2.重新生成一个食物；3.蛇的身体加一个方块；
            food.food.ele.remove();
            food = new Food();
            food.food.addDom(this.container);
          } else {
            var res = this.body.shift();
            // console.log(this.body);
            res.ele.remove();
          }
        }
      }

      let containerEle = document.querySelector(".container");

      // 出现一个食物
      let food = new Food();
      // 添加到页面上；
      food.food.addDom(containerEle);

      let snake = new Snake();
      snake.renderDom(containerEle);

      setInterval(() => {
        document.onkeydown = function (e) {
          var key = e.key;
          console.log(key);
          switch (key) {
            case "ArrowRight":
              snake.dir = "right";
              break;
            case "ArrowLeft":
              snake.dir = "left";
              break;
            case "ArrowUp":
              snake.dir = "up";
              break;
            case "ArrowDown":
              snake.dir = "down";
              break;
          }
        };

        snake.move();
      }, 300);

      // 1.复习 2.放大镜改成  ES6的 3.生成食物 检测碰撞；

      // 用来检测2个元素是否碰撞；
      function isCrash(ele1, ele2) {
        var AminX = ele1.offsetLeft;
        var AmaxX = ele1.offsetLeft + ele1.offsetWidth;

        var AminY = ele1.offsetTop;
        var AmaxY = ele1.offsetTop + ele1.offsetHeight;

        var BminX = ele2.offsetLeft;
        var BmaxX = ele2.offsetLeft + ele2.offsetWidth;

        var BminY = ele2.offsetTop;
        var BmaxY = ele2.offsetTop + ele2.offsetHeight;

        if (
          AmaxX >= BminX &&
          AminX <= BmaxX &&
          AmaxY >= BminY &&
          AminY <= BmaxY
        ) {
          // console.log("横轴上碰撞了");
          return true;
        } else {
          return false;
        }
      }
    </script>
  </body>
</html>
